<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>
            <input type="checkbox" id="t" value="1" onclick="selectAll(this.checked)">
        </li>
        <li>
            <input type="checkbox" class="ids" value="1" onclick="change()">
        </li>
        <li>
            <input type="checkbox" class="ids" value="1" onclick="change()">
        </li>
        <li>
            <input type="checkbox" class="ids" value="1" onclick="change()">
        </li>
        <li>
            <input type="checkbox" class="ids" value="1" onclick="change()">
        </li>
        <li>
            <input type="checkbox" class="ids" value="1" onclick="change()">
        </li>
    </ul>
</body>
<script type="text/javascript">
    function selectAll(f) {
        var chs = document.getElementsByClassName("ids");
        for(var i=0;i<chs.length;i++){
            chs[i].checked = f;
        }
    }
    function change(){
        var ch = document.getElementById("t");
        var chs = document.getElementsByClassName("ids");
        var flg = true;
        for(var i=0;i<chs.length;i++){
            if(chs[i].checked==false){
                flg = false;
                break;
            }
        }
        ch.checked = flg;
    }
</script>
</html>